<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账户设置</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/userSeting.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/index/logo.png" alt="" class="logo">
            <ul class="">
                <li class="check"><a href="../index.html">首页</a></li>
                <li><a href="./online.html">同步课程</a></li>
                <li><a href="javascript:;">在线练习</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" id="search" placeholder="搜索感兴趣的内容">
                <img id="searchimg" src="../img/index/search.png" alt="">
            </div>
            <div class="user">
                <img id="" src="../img/login/user.png" alt="">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li onclick="location.href='./course.html';">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li onclick="location.href='./userSeting.html';">个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <!-- 主体内容 -->
    <main>
        <div class="leftNav" id="leftNav">
            <ul>
                <li class="list">
                    <p class="class">
                        <span>课程中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select"><a href="./course.html">我的课程</a></li>
                        <li class="select">我的练习</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="order">
                        <span>订单中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的订单</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="money">
                        <span>资金管理</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select">我的钱包</li>
                        <li class="select">优惠券</li>
                    </ol>
                </li>
                <li class="list">
                    <p class="center">
                        <span>个人中心</span>
                        <i><img src="../img/userSet/ico2.gif" /></i>
                    </p>
                    <ol>
                        <li class="select active">账户设置</li>
                        <li class="select">我的消息</li>
                        <li class="select">我的评价</li>
                    </ol>
                </li>
            </ul>
        </div>
        <div class="rightUser">
            <div class="title_top">
                <span>账户设置</span>
                <span>&gt;</span>
                <span>个人中心</span>
            </div>
            <div class="title_center">
                <span>学员档案</span>
            </div>
            <div class="content_show">
                <div class="my_icon">
                    <span>头像</span>
                    <a href="javascript:;">
                        <img id="myimg" src="../img/login/user.png" class="myIcon" />
                        <div class="change">
                            更换头像
                            <form action="" id="cardForm" enctype="multipart/form-data" method="post">
                                <input type="file" name="file" class="btn_file" />
                            </form>

                        </div>
                    </a>
                </div>
                <div class="my_name">
                    <div class="my_name_left">
                        <span>真实姓名</span>
                        <input type="text" name="username" id="username" placeholder="方便老师联系你，只能修改一次哦～">
                    </div>
                    <div class="my_name_right">
                        <span>昵称</span>
                        <input type="text" disabled name="user_name" id="user_name">
                    </div>
                </div>
                <div class="my_sex">
                    <div class="my_name_left">
                        <span>学员性别</span>
                        <label for=""><input type="radio" name="sex"  value="1" id="sexman"><span>男</span></label>
                        <label for=""><input type="radio" name="sex"  value="2" id="sexwoman"><span>女</span></label>
                        <label for=""><input type="radio" name="sex"  value="3" id="sexwoman"><span>保密</span></label>
                    </div>
                    <div class="my_name_right">
                        <span>生日</span>
                        <input type="date" name="user_name" id="date">
                    </div>
                </div>
                <div class="my_phone">
                    <div class="my_name_left">
                        <span>城市</span>
                        <select name="" id="city">
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                        </select>
                        <!-- <input type="text" name="city" > -->
                    </div>
                </div>
                <div class="my_learn">

                    <div id="mybaocun" class="my_name_right">
                        保存
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </main>
    <!-- 底部栏 -->
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照
                    | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备
                    01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>

    <!-- 固定导航 -->
    <div class="fix">
        <div class="lesson">
            <img src="../img/index/mylesson.png" alt="">
        </div>
        <div class="test">
            <img src="../img/index/mytest.png" alt="">
        </div>
        <div class="top">
            <img src="../img/index/gotop.png" alt="">
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../utils/myajax.js"></script>
    <script>
        let mid = localStorage.getItem('mid')
        let token = localStorage.getItem('token')
        console.log(token);
        async function getuser() {
            let res = await myAjax({
                url: '/api/user',
                data: {
                    mid
                },
              
            })

            let result = res.result.result
            console.log(result);
           
            $('#myimg').attr('src', result.head_photo_url)
            $('#username').val(result.realname == null ? '' : result.realname)
            $('#user_name').val(result.username)
            $('#city').val(result.city)
            // console.log(result.sex);
            // if (result.sex == 1) {
            //     $('#sexman').prop('checked', true)
            //     $('#sexwoman').prop('checked', false)
            // } else if (result.sex == 2) {
            //     $('#sexman').prop('checked', false)
            //     $('#sexwoman').prop('checked', true)
            // }
            $("input[name='sex']").each(function(index,item){

                if($(this).val()== result.sex){
                    $(this).prop('checked',true)
                }
            })
            
            // console.log();

            let time = new Date(Number(result.birthdate) )
            // console.log(time);
            var day = ("0" + time.getDate()).slice(-2);
            var month = ("0" + (time.getMonth() + 1)).slice(-2);
            var today = time.getFullYear() + "-" + (month) + "-" + (day);
            $('#date').val(today);
        }
        getuser()

        // ----------------------------------------------------------------------------
        // 提交更改个人信息

        $('#mybaocun').click(async function () {
           
            let time = new Date($('#date').val())
           
            let timems = time.getTime()+''
            // console.log(typeof timems);
            let sex 
            $("input[name='sex']").each(function(index,item){
                if($(item).prop('checked') == true){
                    sex=$(item).val()
                }
            })
          
            console.log(sex);
            // console.log(sex);
            let res = await myAjax({
                method: 'put',
                url: '/api/user',
               
                data: {
                    realname: $('#username').val(),
                    sex,
                    birthdate: timems,
                    mid,
                    city: $('#city').val(),

                }
            })
            alert('修改成功')
            
            getuser()
        })

        // ---------------------------------------------------
        // 更改头像
        $('.btn_file').change(function (e) {


            var formData = new FormData();  // 创建一个form类型的数据
            formData.append('f1', e.target.files[0]); // 获取上传文件的数据
            formData.append('mid', mid); // 获取上传文件的数据
            console.log(formData);
            $.ajax({
                url: "http://150.158.175.238/api/uploadhead", // 接口域名地址
                type: 'post',
                contentType: false, // 不设置数据类型
                processData: false, // 将数据转换成对象，不对数据做处理，故 processData: false 
                headers: {
                    "authorization": token,
                },
                data: formData,
                success: function (result) {
                    $('#myimg').attr('src', result.result)
                    gettouxiang(mid)
                   
                },
                error: function (data) {

                }
            })

        })

        $('#searchimg').click(() => {
            console.log($('#search').val());
            if ($('#search').val() == '') {
                return
            }
            location.href = './search_list.html?keyword=' + $('#search').val()
        })
        // async function iconupdate() {
        //     if ($('.btn_file').val() == '') {
        //         console.log(123);
        //     } else {
        //         console.log(111);
        //     }
        // }
    </script>

    <script src="../utils/login.js"></script>
    <script src="../js/userSeting.js"></script>
</body>

</html>